import React from "react";
import { Activity, Heart, Scale, Moon, TrendingUp, TrendingDown } from "lucide-react";
import type { HealthRecord } from "@/services/health.service";

interface HealthCardProps {
  record?: HealthRecord;
  type: "weight" | "bloodPressure" | "heartRate" | "sleepQuality";
  title: string;
  subtitle: string;
  value: string | null;
  trend?: {
    type: "up" | "down";
    value: string;
    description: string;
  };
}

export function HealthCard({ record, type, title, subtitle, value, trend }: HealthCardProps) {
  const Icon = {
    weight: Scale,
    bloodPressure: Heart,
    heartRate: Activity,
    sleepQuality: Moon,
  }[type];

  return (
    <div className="bg-gradient-to-br from-card to-card/95 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
      <div className="flex items-center gap-3 mb-4">
        <Icon className="w-7 h-7 text-primary" />
        <div>
          <h3 className="font-medium">{title}</h3>
          <p className="text-xs text-muted-foreground">{subtitle}</p>
        </div>
      </div>
      {value ? (
        <>
          <div className="text-2xl font-bold text-primary mb-2">{value}</div>
          {trend && (
            <div className="flex items-center gap-2 text-sm">
              {trend.type === "up" ? (
                <TrendingUp className="w-4 h-4 text-destructive" />
              ) : (
                <TrendingDown className="w-4 h-4 text-green-500" />
              )}
              <span className={trend.type === "up" ? "text-destructive" : "text-green-500"}>
                {trend.value}
              </span>
              <span className="text-muted-foreground">{trend.description}</span>
            </div>
          )}
        </>
      ) : (
        <p className="text-sm text-muted-foreground flex items-center gap-2">
          暂无数据
        </p>
      )}
    </div>
  );
} 